<script lang='ts' setup>
import { ElMessage } from 'element-plus'
import { reactive, ref, watch } from 'vue'
import orgMicroServiceSelectDialog from './org-micro-service-select-dialog.vue'
const emit = defineEmits<{
    (e: 'update:visible', val: boolean): void,
    (e: 'update:microServiceId', val: string | undefined): void,
    (e: 'update:microServiceName', val: string | undefined): void,
}>()

const props = defineProps({
    /**是否显示 */
    visible: {
        type: Boolean,
        default: false
    },
    microServiceId: {
        type: String
    },
    microServiceName: {
        type: String
    },
    placeholder: {
        type: String,
        default: '请选择微服务'
    }
})

// 设置是否显示双向绑定
const visibleModelValue = ref(props.visible)
watch(() => props.visible, val => {
    visibleModelValue.value = val;
})
watch(visibleModelValue, val => {
    emit("update:visible", val)
})

// 设置微服务名称双向绑定
const microServiceIdModelValue = ref(props.microServiceId)
watch(() => props.microServiceName, val => {
    microServiceIdModelValue.value = val;
})
watch(microServiceIdModelValue, val => {
    emit("update:microServiceId", val)
})

// 设置微服务名称双向绑定
const microServiceNameModelValue = ref(props.microServiceName)
watch(() => props.microServiceName, val => {
    microServiceNameModelValue.value = val;
})
watch(microServiceNameModelValue, val => {
    emit("update:microServiceName", val)
})

const MicroServiceSelectInputState = reactive({
    onSelectClick: () => {
        visibleModelValue.value = true
    },
    onClearClick: () => {
        microServiceIdModelValue.value = undefined;
        microServiceIdModelValue.value = undefined;
    },

    updateVisible: (val: any) => {
        visibleModelValue.value = val
    },

    onOkButtonClick: (selectData: Array<any>) => {
        if (selectData.length == 0) ElMessage({ type: 'error', message: '请选择所属微服务' })
        microServiceIdModelValue.value = selectData[0].microServiceId
        microServiceNameModelValue.value = selectData[0].microServiceName
        visibleModelValue.value = false
    }
})
</script>
<template>
    <jxtech-select-input
        class="w"
        v-model:inputValue="microServiceNameModelValue"
        :placeholder="placeholder"
        @select-click="MicroServiceSelectInputState.onSelectClick"
        @clear-click="MicroServiceSelectInputState.onClearClick"
    ></jxtech-select-input>
    <org-micro-service-select-dialog
        v-model:visible="visibleModelValue"
        @update:visible="MicroServiceSelectInputState.updateVisible"
        @ok="MicroServiceSelectInputState.onOkButtonClick"
    ></org-micro-service-select-dialog>
</template>